<template>
    <div class="banner-right">
        <el-carousel v-bind="useAttrs()" arrow="always">
            <el-carousel-item v-for="(item, index) in banners" :key="index" >
                <img :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup lang="ts">
import { useAttrs } from "vue";
import useBanmer from "@/hooks/banner";
const { banners } = useBanmer();
</script>

<style lang="scss" scoped>
.banner-right {

    // 两个按钮的样式
    :deep(.el-carousel__arrow) {
        width: 40px;
        height: 80px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    :deep(.el-carousel__arrow:hover) {
        background-color: rgba(0, 0, 0, 0.5);
    }

    // 轮播图 图片的样式
    :deep(.el-carousel--horizontal) {
        a {
            display: inline-block;
            height: 100%;
        }
    }

    :deep(.el-carousel__button) {
        width: 10px;
        height: 10px;
        border-radius: 5px;
    }

    // 修改小圆点的位置
    :deep(.el-carousel__indicators--horizontal) {

        // 当前索引圆点的样式
        .is-active>button {
            width: 20px;
        }
    }
}
</style>
